<template>
  <n-layout :native-scrollbar="false" class="p-20px">
    <n-grid x-gap="30" y-gap="30" :cols="8">
      <n-gi v-for="(gua, index) in $data.gua64GongList">
        <div @dblclick="handleGuaClick(gua)">
          <Gua
            :height="100" 
            :binary="gua.binary"
            :active="currentRoute.params?.binary === gua.binary"
            :bianYaoList="index % 8 !== 0 ? getBianYao(gua.binary, $data.gua64GongList[index-1].binary) : getBianYao(gua.binary, $data.gua64GongList[index+7].binary)"
            >
          </Gua>
          <n-text tag="div" class="text-center w-full font-bold mt-.5">{{ gua.name }}</n-text>
        </div>
      </n-gi>
    </n-grid>
  </n-layout>
</template>

<script setup>
import Gua from '@/components/Gua.vue'
import { getBianYao } from '@/utils/dataPlus.js'

const $data = window.$data

const currentRoute = useRoute()

const handleGuaClick = (gua) => {
  $global.router.push(`/zhouyi/detail/${gua.binary}`)
}
</script>